<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 浏览器加载网页时，会创建页面的文档对象模型（Document Object Model） -->
    <!-- 文档对象模型构建为一个对象树 -->
    <!-- 有了文档对象模型，js 可以动态的操作 html 元素 -->
    <!-- 修改 HTML 元素 -->
    <!-- 修改 HTML 元素属性 -->
    <!-- 修改 HTML 元素样式 -->
    <!-- 删除 HTML 元素和属性 -->
    <!-- 增加 HTML 元素和属性 -->
    <!-- 响应 HTML 事件 -->
    <!-- 添加 HTML 事件 -->
    <img
      src="https://www.w3schools.com/js/pic_htmltree.gif"
      height="266"
      alt="htmltree"
    />

    <table>
      <thead>
        <tr>
          <td>名称&nbsp;</td>
          <td>年份</td>
        </tr>
      </thead>
      <tr>
        <td>苹果</td>
        <td>2022</td>
      </tr>
    </table>
  </body>

  <!-- 在 DOM 中一共有 12 种节点，常用的有 4 种：document（DOM 的入口）、元素节点（HTML 标签）、文本节点（HTML 标签中的文本）、注释节点（HTML 中的注释） -->
  <!-- 
    1. 元素节点 = 1
    2. 属性节点 = 2
    3. 文本节点 = 3
    4. CDATA_SECTION_NODE = 4
    5. 实体引用节点 = 5
    6. 实体节点 = 6
    7. 处理指令节点 = 7
    8. 注释节点 = 8
    9. 文档节点 = 9
    10. 文档类型节点 = 10
    11. 文档片段节点 = 11
    12. 符号节点 = 12
   -->
</html>
